const homeTpl = require('./views/home.html')
const positionTpl = require('./views/position.html')
const positionAddTpl = require('./views/position.add.html')
const positionUpdateTpl = require('./views/position.update.html')
const userInfoTpl = require('./views/userInfo.html')
const { signin } = require('../../../../10-signin-token/lagou-admin-be/controller/userController')
console.log('这是app.js文件');
console.log(homeTpl);
console.log($('.content').html(homeTpl));
$('.content').html(homeTpl)
//html()设置或返回所选元素的内容

//实现左侧导航的切换（就是二阶段的导航切换问题）
$('.sidebar-menu li').on('click',function(){
    //将侧边两个按键绑定点击事件
    $(this).addClass('active').siblings().removeClass('active')
    //this这个li，加上class，返回被选元素的所有同级元素，也就是返回所有，再移除class（这里这个被加的元素并不会被删除，因为代码是从上到下执行的）
    //this是原生对象，但是如果要调用jquery方法，要将他包装成jquery对象所以写$(this)
    let fromAttr = $(this).attr('from')
    //attr设置或返回被选元素的属性值这里我们获取到了li标签里的from里的属性
    //alert(fromAttr)//输出的是点击首页输出home，点击职位列表输出position
    switch(fromAttr){
        case 'home':
            $('.content').html(homeTpl)
        break;
        case 'position':
            getPosTable()
            //当我们点击职位的时候,他也会返回职位列表
        break;
    }
})


//点击职位添加按钮，职位就会添加
//后续动态添加的元素如果也想具有一些事件行为，需要采用事件委托的方式实现(利用他的父元素委托事件)
$('.content').on('click','#addbtn',function(){
    $('.content').html(positionAddTpl);
    //当我们添加的时候他会来的职位列表
})


//点击返回
$('.content').on('click','#posback',function(){
    getPosTable();//建立的查询职位列表方法//当我们返回的时候他会来到职位列表
})

//点击提交
$('.content').on('click','#possubmit',function(){
    let data = $('#possave').serialize()
    let url = $(this).attr('from') === 'add' ? '/api/position/add' : '/api/position/update'
    //将表单里面的数据拿出，通过拼接字符串的方式；
    //需要将前端收集的数据异步发送给后端：因为不能刷新页面
    $('#possave').ajaxSubmit({
        url,
        type:'post',
        dataType:'json',
        success:data=>{
            if(data.flag){
                getPosTable()
            }else{
                alert('职位操作失败!')
            }
        }
    })





/*    我们如果只传数据可以这么传,但是如果传文件,就不能这么传了,因为jquery方法不能传,所以要用jquery.form.min.js插件的方法
 $.ajax({
        url,
        //只要中间件的代理之中写了代理:http://localhost:3000,那么http://localhost:3000就不用写了
        //当代理发现,这里有api之后,他就自动拼接,将上下拼起来
        method:'post',
        data,//data=data简写；
        dataType:'json',
        //规定后端返回的数据格式,后端的对象,一定要全部加双引号,json对象的key一般都是加双引号的;而前端的json对象,key可以选择加双引号,也可以选择不加双引号;
        success:data=>{
            if(data.flag){
                getPosTable()
              }else{
                alert('职位操作失败!')
              }
            data = JSON.parse(data)
            //将JSON字符串转成JSON对象
            console.log('后端给前端返回的数据===>',data)
            getPosTable();//点击提交成功之后,应该返回一个职位列表 
        }
    })//前端发出请求我们需要后端有个接口，可以通过java，php，或者nodejs写接口 */
})
// 查询所有的职位列表
function getPosTable(){
    //建立一个查询职位列表的函数
    //发送ajax从数据库之中获取的所有职位信息
    $.ajax({
      url:'/api/position/find',
      //find查询接口
      dataType:'json',
      //>>请求方式默认不写,就是get请求
      //规定返回数据格式是json
      success:res=>{
          //获取成功之后
        if(res.flag){
          //render函数会返回一个拼接好的新的页面
          const html = template.render(positionTpl,{arr:res.data})
          //(要传到的模板,给这个模板传回去的数据)
        //   Render是使用js的完全编程能力来渲染页面，即用js来构建DOM.
        //   利用template.render(提供)函数进行渲染,将其渲染到positionTpl职位列表之中去之中去
          $('.content').html(html)
        }
      }
    })
  }
// 查询所有的职位列表   //这样做性能是比较低的,因为这样做会动态创造多个tr和td,
/* function getPosTable(){
    //建立一个查询职位列表的函数
    //发送ajax从数据库之中获取所有的职位信息
    $.ajax({
        url:'/api/position/find',
        //find查询接口
        dataType:'json',//>>请求方式默认不写,就是get请求
        //规定返回的数据格式是json
        success:res=>{
            //一旦成功获取到了
            console.log('获取到了所有职位信息===>' + res);
            //写res和data都是一样的效果
            if(res.flag){
                let arr = res.data.map(item=>{
                    //拿到数据之后就可以对数据进行遍历,map会返回一个新数组
                    return ` <tr>
                    <td>1</td>
                    <td><img width="50" height="50"
                            src="https://www.lgstatic.com/i/image3/M00/12/AF/CgpOIFpu7ROAU0UaAAAvwWv_H_w082.jpg" alt="">
                    </td>
                    <td>大蓝网络</td>
                    <td>3D动作</td>
                    <td>广州</td>
                    <td>今天20:22</td>
                    <td>7K-14K</td>
                    <td>
                        <button class="btn btn-sm btn-primary pos-edit" posid="{{$value._id}}"><span
                                class="fa fa-edit"></span> 修改</button>
                        <button class="btn btn-sm btn-danger pos-remove" posid="{{$value._id}}"
                            filename="{{$value.companyLogo}}"><span class="fa fa-remove"></span> 删除</button>
                    </td>
                </tr> `
                })
                //render函数会返回一个拼接好的新的页面
                $('.table').append(arr)
                //之后我们将这个遍历之后的数组追加到table之中
                const html = template.render(positionTpl,{arr:res.data})
                $('.content').html(html)
            }
        }
    }) */
    // $('.content').html(positionTpl)
    //打开一个职位列表

    //修改职位
    $('.content').on('click','.pos-edit',function(){
        //通过事件监听的方法来添加职位修改按钮的功能
        let posId = $(this).attr('posid')  
        //attr拿到posid的属性
        //根据唯一的posId从数据库之中查询到具体的职位信息
        $.ajax({
            url:'/api/position/'+posId,  // /api/position/:id
            dataType:'json',
            success:data => {
                if(data.flag){
                    //跳转到编辑页面
                    const html = template.render(positionUpdateTpl,{data:data.data})
                    $('.content').html(html)
                }
            }
        })
    })

//用户注册
let isSignin = false
let greeting = '您好'
renderTpl(isSignin,greeting)  //方法执行,传入参数
function renderTpl(isSignin,greeting){
    const html = template.render(userInfoTpl,{
        isSignin,     //代表登陆
        greeting
    })
    $('.user-menu').html(html)
}


//点击注册或者登陆
$('.navbar-nav').on('click','.user-menu span',function(){
    if($(this).attr('id') === 'btn-signup'){  //如果是注册按钮,点击的是注册
        $('#user-submit').off('click').on('click',async function(){
            //获取用户名和密码
            let username = $('#username').val()
            let password = $('#password').val()
            //异步发送后端
            let result = await signin('signup',{username,password})
            alert(result.data.message)
        })

    }else{   //点击是登陆
        $('#user-submit').off('click').on('click',async function(){
            let username = $('#username').val()
            let password = $('#password').val()
            let result = await sign('signin',{username,password})
            if(result.flag){
                //前端需要将后端返回的token令牌存入本地存储之中
                localStorage.setItem('token',result.data.token)
                renderTpl(true,'恭喜您:'+username)

            }
        })

    }
})
function sign(url,data){
    //url是signin
    return $.ajax({
        //进行异步请求
        url:'/api/user/'+url,
        data,
        method:'post',
        dataType:'json',
        success:data=>{
            return data
            //如果成功,后端就返回数据
        }
    })
}


//浏览器刷新的时候,需要前端携带token发送给后端
verifySign()

function verifySign(){
    $.ajax({
        url:'/api/user/issignin',
        type:'post',
        dataType:'json',
        headers:{
            token:localStorage.getItem('token')
        },
        success:result=>{
            if(result.flag){
                renderTpl(true,'恭喜您:'+result.data.username)
            }
        }

    })
}


//点击退出
$('.user-menu').on('click','#user-signout',function(){
    localStorage.removeItem('token')
    location.href = '/'
})